<!-- 新增/编辑规格 -->
<template>
	<view class="inventory">
		<view class="form">
			<view class="form-item">
				<view class="form-item-name">产品名称</view>
				<input v-model="form.name" type="text" placeholder="请输入产品名称" class="form-item-input" />
			</view>
			<view class="form-item">
				<view class="form-item-name">副标题</view>
				<input v-model="form.title" type="text" placeholder="请输入副标题" class="form-item-input" />
			</view>
			<view class="form-item">
				<view class="form-item-name">市场价格</view>
				<input type="text" v-model="form.market_price" placeholder="请输入市场价格" class="form-item-input" />
			</view>
			<view class="form-item">
				<view class="form-item-name">包邮件数</view>
				<input type="number" v-model="form.express_num" placeholder="请输入包邮件数" class="form-item-input" />
			</view>
			<view class="form-item">
				<view class="form-item-name">快递费用</view>
				<input type="text" v-model="form.express_price" placeholder="请输入快递费用" class="form-item-input" />
			</view>
		</view>
		<view class="line"></view>
		<view class="line"></view>
		<view class="upload">
			<view class="upload-title">
				产品封面图片
			</view>
			<view class="upload-box">
				<view class="upload-item" v-if="form.logo">
					<image :src="form.logo" class="upload-imageList"></image>
					<view class="upload-delete" @click="onDelete(index,'logo')">x</view>
				</view>
				<view class="upload-item" @click="onUploadImage('logo')">
					<image src="../../../static/pz.jpg" class="upload-image"></image>
				</view>
				<!-- 占位置 -->
				<!-- len 为数组长度 3位每行所占位置 -->
				<view class="upload-line"></view>
			</view>
		</view>


		<view class="upload">
			<view class="upload-title">
				产品图片(可选择多张图片上传）
			</view>
			<view class="upload-box">
				<view class="upload-item" v-for="(item,index) in productList" :key='item.key'>
					<image :src="item.image" class="upload-imageList"></image>
					<view class="upload-delete" @click="onDelete(index)">x</view>
				</view>
				<view class="upload-item" @click="onUploadImage(false)">
					<image src="../../../static/pz.jpg" class="upload-image"></image>
				</view>
				<!-- 占位置 -->
				<!-- len 为数组长度 3位每行所占位置 -->
				<view class="upload-line"
					v-for='(item,index) in productList.length % 3==0?0:3 -(productList.length % 3)-1' :key='index'>
				</view>
			</view>
		</view>

		<!-- 占位 -->
		<view class="tabTitle-line"></view>
		<view class="tabTitle" @click="onEdit">
			<view class="tabTitle-name">
				{{form.pk_id?'保存编辑':'新增上传'}}
			</view>
		</view>

	</view>
</template>


<script>
	import publicMethod from '../../../mixins/index'
	import pinyin from '@/utils/js-pinyin'
	import {
		adminPost
	} from '@/common/http.request.js';
	export default {
		mixins: [publicMethod],
		data() {
			return {
				form: {
					name: '', //规格名称
					title: '', //副标题
					logo: '', //产品封面图
					img: '', //产品轮播图
					limitpurchase: 0, //限购数量
					price: 0.0, //产品价格
					market_price: '', //市场价格
					sort: 99, //排序
					express_num: '', //包邮数量
					express_price: '', //快递费用
					is_purchase: 0, //是否提供采购
					integral: 0, //是否赠送积分
					is_refund: 0, //是否可退款
					is_online: 0, //是否上线
					type: '1'
				},


				checkInputList: {
					name: {
						message: '请输入产品名称'
					},

				},
				checked: false,
				id: '',
			}
		},

		onLoad(options) {
			this.id = options.id
			this.initPage(options.id)
		},
		methods: {

			// 初始化数据
			initPage(pk_id) {
				this.dynamic('产品新增')
				if (pk_id == 'false') return
				let params = {
					pk_id
				}
				this.$GetQueryDataList('b_product', 1, 10, {
					...params
				}).then(res => {
					this.dynamic('产品编辑')
					this.form.pk_id = res.data[0].pk_id
					for (let i in this.form) {
						this.form[i] = res.data[0][i]
					}
					if (res.data[0].img) this.addKey(res.data[0].img.split(','))
				})

			},

			onSwitch(e, name) {
				this.form[name] = e
			},



			// 选择产品类型
			confirm(e) {
				this.$set(this.form, 'type', e[0].value)
			},



			onEdit() {

				this.checkInput().then(res => {
					if (res) {
						this.$loading('提交中，请稍后')
						let title = '提交成功'
						let params = {
							...this.form,
							fk_business_id: this.vuex_business.pk_id
						}

						if (!this.form.pk_id) {
							this.$AddNewData('b_product', {
								...params,
								fk_supplier_id: this.vuex_adminuser.supplier_id
							}).then(res => {
								this.onSuccess(title)

								this.baiduAdd()
							}).catch(() => {
								this.$hide()
							})
							return
						}
						this.$UpdateModify('b_product', {
							...params
						}).then(res => {
							this.onSuccess(title)
							this.baiduAdd()
						}).catch(() => {
							this.$hide()
						})

					}

				})

			},
			baiduAdd() {

				let params = {
					business_id: this.vuex_business.pk_id,
					name: this.form.name,
				}
				let str = this.form.logo || ''
				str += (this.form.img ? ',' : '') + (this.form.img || '')

				adminPost('BaiduProductAdd', {
					...params
				}, str).catch(err => {
					console.log(err)
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.form-item {
		display: flex;
		align-items: center;
		width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		padding: 0 30rpx;
		border-top: 1rpx solid #f5f5f5;

		.form-item-name {
			font-size: 30rpx;
			font-weight: bold;
			color: #222222;
			margin-right: 32rpx;
		}

		.form-item-title {
			color: #BABABA;
			font-size: 30rpx;
			display: flex;
			align-items: center;
		}

		.form-item-input {
			width: 500rpx;
			height: 100%;
			font-size: 30rpx;
			font-weight: 500;
			color: #BABABA;
			letter-spacing: 3rpx
		}
	}

	.flex-c-c {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.line {
		width: 100%;
		height: 23rpx;
		background-color: #f5f5f5;
	}

	// 占位
	.tabTitle-line {
		width: 100%;
		height: 108rpx;
	}

	.upload {
		width: 100%;
		background: #FFFFFF;
		padding: 30rpx;
		box-sizing: border-box;

		.upload-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #222222;
			margin-bottom: 30rpx;
		}

		.upload-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.upload-line {
				width: calc(100% / 3 - 40rpx);
				height: 216rpx;
			}

			.upload-item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: calc(100% / 3 - 40rpx);
				height: 216rpx;
				background: #EEEEEE;
				border-radius: 8rpx;
				margin-bottom: 30rpx;

				.upload-delete {
					position: absolute;
					text-align: center;
					line-height: 35rpx;
					font-size: 30rpx;
					font-weight: 700;
					right: -10rpx;
					top: -15rpx;
					width: 35rpx;
					height: 35rpx;
					color: #ffffff;
					border-radius: 50%;
					background-color: red;
				}

				.upload-image {
					width: 50rpx;
					height: 44rpx;
				}

				.upload-imageList {
					width: 100%;
					height: 100%;
				}
			}

		}
	}


	// 保存 || 编辑
	.tabTitle {
		display: flex;
		align-items: center;
		position: fixed;
		bottom: env(safe-area-inset-bottom);
		left: 0;
		width: 100%;
		height: 138rpx;
		padding: 15rpx 45rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #f5f5f5;
		background-color: #ffffff;
		z-index: 99;

		.tabTitle-name {
			width: 100%;
			height: 88rpx;
			background: #3297EF;
			border-radius: 8rpx;
			color: #ffffff;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.flex-sb {
		display: flex;
		justify-content: space-between;
	}
</style>
